<template>
  <div class="table">
    <h6>员工信息</h6>
    <div id="table">
      <el-table
        :data="tableData"
        :border="false"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="name"
          label="员工编号"
          width="180"
        />
        <el-table-column
          prop="address"
          label="员工姓名"
        />
        <el-table-column
          prop="address"
          label="手机号"
        />
        <el-table-column
          prop="address"
          label="所属机构"
        />
        <el-table-column
          prop="address"
          label="系统账户"
        />
        <el-table-column
          prop="address"
          label="系统角色"
        />
        <el-table-column
          prop="address"
          label="账号状态"
        />
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
export default {
  name: 'InstitutionTable',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      items: [
        {
          'userId': '1025111573938823425',
          'account': 'yxkdy002',
          'name': '王秀越',
          'password': null,
          'workNumber': null,
          'email': null,
          'agency': {
            'id': null,
            'name': '越秀区营业部',
            'type': null,
            'subAgencies': null
          },
          'mobile': '17788887777',
          'station': null,
          'stationName': '快递员',
          'avatar': '',
          'status': 1,
          'creator': null,
          'createTime': null,
          'roleNames': [
            '快递员'
          ],
          'workStatus': 1,
          'age': null,
          'workDate': null
        },
        {
          'userId': '1025111247919767297',
          'account': 'hdkdy002',
          'name': '王都花',
          'password': null,
          'workNumber': null,
          'email': null,
          'agency': {
            'id': null,
            'name': '花都营业部',
            'type': null,
            'subAgencies': null
          },
          'mobile': '16677776666',
          'station': null,
          'stationName': '快递员',
          'avatar': '',
          'status': 1,
          'creator': null,
          'createTime': null,
          'roleNames': [
            '快递员'
          ],
          'workStatus': 1,
          'age': null,
          'workDate': null
        },
        {
          'userId': '1025111112225644097',
          'account': 'hdkdy001',
          'name': '王华都',
          'password': null,
          'workNumber': null,
          'email': null,
          'agency': {
            'id': null,
            'name': '花都营业部',
            'type': null,
            'subAgencies': null
          },
          'mobile': '17799995555',
          'station': null,
          'stationName': '快递员',
          'avatar': '',
          'status': 1,
          'creator': null,
          'createTime': null,
          'roleNames': [
            '快递员'
          ],
          'workStatus': 1,
          'age': null,
          'workDate': null
        },
        {
          'userId': '1025110935532199265',
          'account': 'yxkdy001',
          'name': '王越秀',
          'password': null,
          'workNumber': null,
          'email': null,
          'agency': {
            'id': null,
            'name': '越秀区营业部',
            'type': null,
            'subAgencies': null
          },
          'mobile': '16688886666',
          'station': null,
          'stationName': '快递员',
          'avatar': '',
          'status': 1,
          'creator': null,
          'createTime': null,
          'roleNames': [
            '快递员'
          ],
          'workStatus': 1,
          'age': null,
          'workDate': null
        },
        {
          'userId': '1025110675888003969',
          'account': 'bakdy002',
          'name': '王安宝',
          'password': null,
          'workNumber': null,
          'email': null,
          'agency': {
            'id': null,
            'name': ' 宝安区营业部',
            'type': null,
            'subAgencies': null
          },
          'mobile': '16677776666',
          'station': null,
          'stationName': '快递员',
          'avatar': '',
          'status': 1,
          'creator': null,
          'createTime': null,
          'roleNames': [
            '快递员'
          ],
          'workStatus': 1,
          'age': null,
          'workDate': null
        },
        {
          'userId': '1025110490961140193',
          'account': 'gmkdy002',
          'name': '王明光',
          'password': null,
          'workNumber': null,
          'email': null,
          'agency': {
            'id': null,
            'name': '光明区营业部',
            'type': null,
            'subAgencies': null
          },
          'mobile': '16677779999',
          'station': null,
          'stationName': '快递员',
          'avatar': '',
          'status': 1,
          'creator': null,
          'createTime': null,
          'roleNames': [
            '快递员'
          ],
          'workStatus': 1,
          'age': null,
          'workDate': null
        }
      ]
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.table{
    width: 100%;
    background-color: #fff;
    padding-bottom: 20px;
      h6{
      background-color: #fafafa;
      height: 55.28px;
      font-size: 18px;
      line-height: 55.28px;
      padding-left: 20px;
      margin: 0;
    }
    #table{
      padding: 20px 30px;
    }
    .page{
      text-align: center;
    }
}
</style>
